{{ template "header" . }}

<!-- Breadcrumb -->
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="/">Home</a></li>
  <li class="breadcrumb-item"><a href="{{ Url "virtual-machine-list" }}">Virtual Machines</a></li>
  <li class="breadcrumb-item"><a href="{{ Url "virtual-machine-list" }}?node={{ .Vm.NodeId }}">{{ .Vm.NodeId }}</a></li>
  <li class="breadcrumb-item"><a href="{{ Url "virtual-machine-detail" "id" .Vm.Id "node" .Vm.NodeId }}">{{ .Vm.Id }}</a></li>
  <li class="breadcrumb-item active">Delete</li>
</ol>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-body">
          <h4>Delete {{ .Vm.Id }} machine</h4>
          <br>
          <p>
            Are you sure you want to remove <b>{{ .Vm.Id }}</b>?
            <br>
            It has the following volumes attached:
            <ul>
              {{ range .Vm.Volumes }}
              <li>{{ .Path }}</li>
              {{ end }}
            </ul>
          </p>
          <form class="JS-ReactiveForm" method="post" action="">{{ CSRFField .Request }}
            <div class="form-group row">
              <div class="col-md-12">
                <div class="custom-control custom-checkbox">
                  <input id="deleteVolumes" name="DeleteVolumes" value="true" class="custom-control-input"
                    type="checkbox" />
                  <label class="custom-control-label" for="deleteVolumes">Remove volumes</label>
                </div>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-md-12">
                <button class="btn btn-danger" data-loading="<i class='icon-refresh icons'></i> Removing virtual machine..."
                  type="submit">Remove Virtual Machine</button>
                <a class="btn btn-secondary" href="{{ Url "virtual-machine-detail" "id" .Vm.Id "node" .Vm.NodeId }}">Cancel</a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>


{{ template "footer" . }}
